<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('40-TGKt8o__zzzQuzHZu1')}}</p>
      <div class="operate-area">
        <!-- <div class="inline-item search-item">
          <Input v-model="pileCode" @on-enter="searchCode">
            <span slot="prepend">{{$t('PO_N3YQc95VLSXNN59RnR')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchCode"
            ></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <Input v-model="pileName" @on-enter="searchName">
            <span slot="prepend">{{$t('dUE9V6jUHBdS6m9avfiqp')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchName"
            ></Button>
          </Input>
        </div>
        <div class="operate-select-item">
          <label class="title mr10">{{$t('_U-ZtVG4JB3EY66WR98OJ')}}</label>
          <div class="content inline-block">
            <Select
              v-model="pileType"
              style="width: 200px"
              @on-change="changePileType"
            >
              <Option
                v-for="item in pileTypes"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </Option>
            </Select>
          </div>
        </div> -->

        <div class="operate-area">
          <!-- <div class="inline-item btn-item">
            <Button type="info" icon="md-add" @click="queryPile"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
          </div> -->
          <div class="inline-item btn-item">
            <Button type="info" icon="md-add" @click="addPile"
              >{{$t('N8xdbBoV-d6Vc33tKrGGm')}}</Button
            >
          </div>
          <!-- <div class="inline-item btn-item">
            <Button type="primary" icon="ios-search" @click="gunGoverment"
              >{{$t('ar_-HkbKt1u0_qsX8wJBb')}}</Button
            >
          </div> -->
          <div class="inline-item btn-item">
            <Button type="primary" icon="ios-search" @click="remoteControl"
              >{{$t('p2mtp1PTMOtn__qxtAq63')}}</Button
            >
          </div>
          <div class="inline-item btn-item">
            <Button type="primary" icon="ios-search" @click="remoteUpdate"
              >{{$t('4PWQ1ofYS95zIASFh6ga0')}}</Button
            >
          </div>
        </div>

      </div>
      <Table
        highlight-row
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-current-change="selectionChangeHandler"
      >
        <template slot-scope="{ row }" slot="isforeign">
          <tag :color="row.isforeign === '1' ? 'success' : 'error'">{{ row.isforeign === '1' ? '√' : '×' }}</tag>
        </template>
      </Table>
      <!-- <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page> -->
    </Card>
    <Modal
      v-model="formModal"
      :title="formTitle"
      footer-hide
      :mask-closable="false"
    >
      <form-info
        :status="status"
        :data="formData"
        @success="success"
        @fail="fail"
        @close="close"
      />
    </Modal>
    <Modal
      v-model="controlModal"
      :title="controlTitle"
      footer-hide
      :mask-closable="false"
    >
      <control-info
        :data="controlformData"
        @success="controlSuccess"
        @fail="controlFail"
        @close="controlClose"
      />
    </Modal>
    <Modal
      v-model="updateModal"
      :title="updateTitle"
      footer-hide
      :mask-closable="false"

    >
      <update-info
        :data="updateformData"
        :edata="data"
        @close="updateClose"
      />
    </Modal>
  </div>
</template>

<script>
import { getEquipmentlist, deleteEquipment } from '@/api/data2'
import FormInfo from './components/pile_info'
import ControlInfo from './components/control_info'
import UpdateInfo from './components/update_info'

export default {
  name: 'pile_manage',
  components: {
    FormInfo,
    ControlInfo,
    UpdateInfo
  },
  data () {
    return {
      controlModal: false,
      updateModal: false,
      pileCode: '',
      pileName: '',
      pileType: '',
      pileTypes: [{
        name: this.$t('FArjW8tO4Ve64ihpq4mS5'),
        id: '0'
      }, {
        name: this.$t('1mJZgGX4yUf8keAuTCd6s'),
        id: '1'
      }, {
        name: this.$t('pUp8tS1uT4bIraonzAECH'),
        id: '2'
      }],
      loading: false,
      formModal: false,
      status: 'new',
      formData: {
        id: '',
        stationid: this.$store.state.user.stationId,
        sortindex: '',
        name: '',
        manufacturername: '',
        acdcmodelmanufactor: '',
        type: '',
        guncount: '',
        capacity: '',
        voltage: '',
        current: '',
        swapelemeterbeforesumread: '',
        isforeign: ''
      },
      columns: [
        {
          title: this.$t('PO_N3YQc95VLSXNN59RnR'),
          key: 'id',
          width: 150,
          fixed: 'left'
        },
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          key: 'name',
          width: 150,
          fixed: 'left'
        },
        {
          title: this.$t('Pmmu2pvDykNb-WJ54KANR'),
          key: 'manufacturername',
          width: 150
        },
        {
          title: this.$t('_U-ZtVG4JB3EY66WR98OJ'),
          key: 'type',
          width: 150
        },
        {
          title: this.$t('Hj_cOkH4-CUmh2cXEEaYZ'),
          key: 'guncount',
          width: 150
        },
        {
          title: this.$t('evvPgsRCGOrZ8EtxQ8Ij_') + '(kW)',
          key: 'capacity',
          width: 150
        },
        {
          title: this.$t('q3Pl3tWC9bNV4zqWMlJPr') + '(V)',
          key: 'voltage',
          width: 150
        },
        {
          title: this.$t('cdM2FAlEY4B9QyLYfmdKh') + '(A)',
          key: 'current',
          width: 150
        },
        {
          title: this.$t('kyhcIm8VUNbkfeKs0mMBi'),
          key: 'swapelemeterbeforesumread',
          width: 150
        },
        {
          title: this.$t('do3vwggpPql-Hd6Kvo0Hf'),
          // key: 'isforeign',
          width: 150,
          slot: 'isforeign'
        },
        {
          title: this.$t('8_x_3DX4_T4ey21SMJsn7'),
          key: 'acdcmodelmanufactor',
          width: 150
        },
        {
          title: this.$t('6ToDaa33BFH85ZT3viNM7'),
          key: 'timeinterval',
          width: 150
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          width: 180,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  on: {
                    click: () => {
                      this.deleteItem(params.index)
                    }
                  }
                },
                this.$t('hND4KLgCabT6swtTJBIUf')
              )
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      selection: null,
      controlformData: {},
      updateformData: {
        equipmentid: '',
        file: ''
      }
    }
  },
  created () {
    this.queryTable()
  },
  computed: {
    formTitle () {
      return (this.status === 'new' ? this.$t('N8xdbBoV-d6Vc33tKrGGm') : this.$t('3cH_U2GeBUW1V74W8oDNv')) + this.$t('40-TGKt8o__zzzQuzHZu1')
    },
    controlTitle () {
      return this.$t('p2mtp1PTMOtn__qxtAq63')
    },
    updateTitle () {
      return this.$t('4PWQ1ofYS95zIASFh6ga0')
    }
  },
  methods: {
    async queryTable ({
      pileCode = this.pileCode,
      pileName = this.pileName,
      pileType = this.pileType
    } = {}) {
      this.loading = true
      const { code, data, desc } = await getEquipmentlist({
        // pageSize,
        // current,
        pileCode,
        pileName,
        pileType,
        stationid: this.$store.state.user.stationId
      })
      if (code == 200) {
        this.data = data.datalist || []
        // this.total = res.total
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    },
    success (desc) {
      if (this.status === 'new') {
        this.$Message.success(desc || this.$t('38AWpi9C1Z7eLtpj1TEfD'))
      } else {
        this.$Message.success(desc || this.$t('qDM1Ic0NDNp4weHsjQ4sN'))
      }
      this.formModal = false
      this.queryTable()
    },
    fail (msg) {
      this.formModal = false
      this.$Message.error(msg)
    },
    close () {
      this.formModal = false
    },
    selectionChangeHandler (selection) {
      console.log(selection)
      this.selection = selection
    },
    editItem (index) {
      const item = this.data[index]
      this.formData = {
        ...item,
        type: item.type == '直流' ? '1' : item.type == '交流' ? '2' : '',
        sortindex: item.sortindex + '',
        guncount: item.guncount + '',
        capacity: item.capacity + '',
        voltage: item.voltage + '',
        current: item.current + '',
        swapelemeterbeforesumread: item.swapelemeterbeforesumread + '',
        isforeign: item.isforeign + ''
      }
      this.status = 'edit'
      this.editIndex = index
      this.formModal = true
    },
    deleteItem (index) {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: async () => {
          // this.data.splice(index, 1)
          const { code, desc } = await deleteEquipment({
            id: this.data[index].id
          })
          if (code == 200) {
            this.$Message.success(this.$t('hWGIgDqZtmSWFd9gU3Ya7'))
            this.queryTable()
          } else {
            this.$Message.error(desc)
          }
        }
      })
    },
    searchCode () {

    },
    searchName () {

    },
    changePileType () {

    },
    remoteUpdate () {
      this.updateformData = {
        equipmentid: '',
        file: ''
      }
      this.updateModal = true
    },
    queryPile () {
      if (this.selection) {
        // this.$router.push({
        //   name: 'station_user_query',
        //   params: {
        //     id: this.selections[0].id
        //   }
        // })
      } else {
        this.$Message.warning(this.$t('rb8T3ATjg_q13bo-wb9Vc'))
      }
    },
    addPile () {
      this.formData = {
        id: '',
        stationid: this.$store.state.user.stationId,
        sortindex: '',
        name: '',
        manufacturername: '',
        acdcmodelmanufactor: '',
        type: '',
        guncount: '',
        capacity: '',
        voltage: '',
        current: '',
        swapelemeterbeforesumread: '',
        isforeign: ''
      }
      this.status = 'new'
      this.formModal = true
    },
    gunGoverment () {

    },
    remoteControl () {
      if (this.selection) {
        this.controlModal = true
        this.controlformData = {
          stationid: +this.$store.state.user.stationId,
          equipmentid: this.selection.id,
          number: '1',
          yktype: '0',
          ykvalue: ''
        }
      } else {
        this.$Message.warning(this.$t('rb8T3ATjg_q13bo-wb9Vc'))
      }
    },
    controlSuccess (desc) {
      this.$Message.success(desc || this.$t('4dfj0GS91RclHHT8Bw-ir'))
      this.controlModal = false
    },
    controlFail (msg) {
      this.controlModal = false
      this.$Message.error(msg)
    },
    controlClose () {
      this.controlModal = false
    },
    updateClose () {
      this.updateModal = false
    }
  }
}
</script>
